import React from 'react';
import { Card, List, Avatar, Collapse } from 'antd';

const experts = [
  {
    id: 1,
    author: '李明（AI产业分析师）',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
    title: 'AI监管政策对创新的影响',
    summary: '合理的监管有助于AI产业健康发展，但需防止过度限制创新...',
    detail: '建议政策制定者在保障安全的同时，给予企业更多创新空间，推动AI技术落地。'
  },
  {
    id: 2,
    author: '王芳（AI人才专家）',
    avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
    title: 'AI人才培养的关键路径',
    summary: '产学研结合是AI人才培养的核心，企业应加强与高校合作...',
    detail: '通过实习、项目制等方式提升学生实践能力，满足行业对高端AI人才的需求。'
  },
  {
    id: 3,
    author: '张伟（投资人）',
    avatar: 'https://randomuser.me/api/portraits/men/65.jpg',
    title: 'AI赛道投融资新趋势',
    summary: '基础模型、垂直应用和AI安全成为投资热点...',
    detail: '未来三年，AI安全、行业大模型和AIGC应用将持续受到资本关注。'
  }
];

const { Panel } = Collapse;

const ExpertView: React.FC = () => {
  return (
    <Card title={<span style={{ color: '#222', fontWeight: 600, fontSize: 18 }}>专家观点</span>} bordered={false} style={{ background: '#fff', borderRadius: 16, color: '#222' }}>
      <List
        itemLayout="vertical"
        dataSource={experts}
        renderItem={item => (
          <List.Item style={{ marginBottom: 16 }}>
            <Card style={{ background: '#f6faff', borderRadius: 12, color: '#222' }}>
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<span style={{ color: '#222', fontWeight: 600 }}>{item.author}</span>}
                description={<span style={{ color: '#fa8c16', fontWeight: 500 }}>{item.title}</span>}
              />
              <div style={{ color: '#666', marginBottom: 8 }}>{item.summary}</div>
              <Collapse ghost>
                <Panel header="点击展开详情" key="1">
                  <div style={{ color: '#888' }}>{item.detail}</div>
                </Panel>
              </Collapse>
            </Card>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default ExpertView; 